<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AnySDK OCR 演示</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .preview-image {
            max-width: 300px;
            max-height: 300px;
            margin: 10px 0;
        }
        .result-block {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">AnySDK OCR 演示</h1>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">单张图片识别</h5>
                    </div>
                    <div class="card-body">
                        <form id="singleForm">
                            <div class="mb-3">
                                <label for="singleFile" class="form-label">选择图片</label>
                                <input type="file" class="form-control" id="singleFile" accept="image/*">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">识别选项</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="detectOrientation" checked>
                                    <label class="form-check-label" for="detectOrientation">自动检测方向</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="returnConfidence" checked>
                                    <label class="form-check-label" for="returnConfidence">返回置信度</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="returnBlock" checked>
                                    <label class="form-check-label" for="returnBlock">返回版块信息</label>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">开始识别</button>
                        </form>
                        <div id="singlePreview" class="mt-3"></div>
                        <div id="singleResult" class="mt-3"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">批量图片识别</h5>
                    </div>
                    <div class="card-body">
                        <form id="batchForm">
                            <div class="mb-3">
                                <label for="batchFiles" class="form-label">选择多张图片</label>
                                <input type="file" class="form-control" id="batchFiles" accept="image/*" multiple>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">识别选项</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="batchDetectOrientation" checked>
                                    <label class="form-check-label" for="batchDetectOrientation">自动检测方向</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="batchReturnConfidence" checked>
                                    <label class="form-check-label" for="batchReturnConfidence">返回置信度</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="batchReturnBlock" checked>
                                    <label class="form-check-label" for="batchReturnBlock">返回版块信息</label>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">开始批量识别</button>
                        </form>
                        <div id="batchPreview" class="mt-3"></div>
                        <div id="batchResult" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 单张图片识别
        document.getElementById('singleForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const file = document.getElementById('singleFile').files[0];
            if (!file) {
                alert('请选择图片');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);
            formData.append('detectOrientation', document.getElementById('detectOrientation').checked);
            formData.append('returnConfidence', document.getElementById('returnConfidence').checked);
            formData.append('returnBlock', document.getElementById('returnBlock').checked);

            try {
                const response = await fetch('/api/ocr/recognize', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                displayResult(result, 'singleResult');
            } catch (error) {
                console.error('识别失败:', error);
                alert('识别失败，请重试');
            }
        });

        // 批量图片识别
        document.getElementById('batchForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const files = document.getElementById('batchFiles').files;
            if (files.length === 0) {
                alert('请选择图片');
                return;
            }

            const formData = new FormData();
            for (let file of files) {
                formData.append('files', file);
            }
            formData.append('detectOrientation', document.getElementById('batchDetectOrientation').checked);
            formData.append('returnConfidence', document.getElementById('batchReturnConfidence').checked);
            formData.append('returnBlock', document.getElementById('batchReturnBlock').checked);

            try {
                const response = await fetch('/api/ocr/recognize/batch', {
                    method: 'POST',
                    body: formData
                });
                const results = await response.json();
                displayBatchResults(results, 'batchResult');
            } catch (error) {
                console.error('批量识别失败:', error);
                alert('批量识别失败，请重试');
            }
        });

        // 显示识别结果
        function displayResult(result, elementId) {
            const resultDiv = document.getElementById(elementId);
            resultDiv.innerHTML = `
                <div class="result-block">
                    <h6>识别文本：</h6>
                    <p>${result.text}</p>
                    ${result.confidence ? `<p>置信度：${result.confidence}</p>` : ''}
                    ${result.orientation ? `<p>方向：${result.orientation}°</p>` : ''}
                    ${result.blocks ? `
                        <h6>版块信息：</h6>
                        <ul>
                            ${result.blocks.map(block => `
                                <li>
                                    文本：${block.text}<br>
                                    置信度：${block.confidence}<br>
                                    位置：(${block.box.x}, ${block.box.y}, ${block.box.width}, ${block.box.height})
                                </li>
                            `).join('')}
                        </ul>
                    ` : ''}
                </div>
            `;
        }

        // 显示批量识别结果
        function displayBatchResults(results, elementId) {
            const resultDiv = document.getElementById(elementId);
            resultDiv.innerHTML = results.map((result, index) => `
                <div class="result-block">
                    <h6>图片 ${index + 1} 识别结果：</h6>
                    <p>${result.text}</p>
                    ${result.confidence ? `<p>置信度：${result.confidence}</p>` : ''}
                    ${result.orientation ? `<p>方向：${result.orientation}°</p>` : ''}
                    ${result.blocks ? `
                        <h6>版块信息：</h6>
                        <ul>
                            ${result.blocks.map(block => `
                                <li>
                                    文本：${block.text}<br>
                                    置信度：${block.confidence}<br>
                                    位置：(${block.box.x}, ${block.box.y}, ${block.box.width}, ${block.box.height})
                                </li>
                            `).join('')}
                        </ul>
                    ` : ''}
                </div>
            `).join('');
        }

        // 预览图片
        document.getElementById('singleFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('singlePreview').innerHTML = `
                        <img src="${e.target.result}" class="preview-image" alt="预览图片">
                    `;
                };
                reader.readAsDataURL(file);
            }
        });

        document.getElementById('batchFiles').addEventListener('change', function(e) {
            const files = e.target.files;
            const previewDiv = document.getElementById('batchPreview');
            previewDiv.innerHTML = '';

            for (let file of files) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewDiv.innerHTML += `
                        <img src="${e.target.result}" class="preview-image" alt="预览图片">
                    `;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>